import cards from "../components/cards";
import githubs from "../components/githubs";
import {Input, Select, Space, Cascader, message, Form, Button, Modal} from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Row, Col } from 'antd';
import {useEffect, useState} from "react";
import Cards from "../components/cards";
import GitHubs from "../components/githubs";
import CollectionsPage from "../components/modalForm";
import {createData, getData} from "../utils/handleLocal";
import {urlList, cardList, initAllData} from "../utils/initData";
import HeaderBar from "../components/headerBar";
const { Option } = Select;

const IndexPage = () => {
    // hooks
    const [ target, setTarget ] = useState('https://www.baidu.com/s?wd=')
    const [ addShow,setAddShow ] = useState(false)
    const [ setData, setSetData ] = useState({})
    // const [ todoList, setTodoList ] = useState([])
    // const [ urlList, setUrlList ] = useState([])
    useEffect(() => {
        // initAllData()
        setSetData(getData('setData'))
        console.log(setData)
        getData('urlList')
    },[])

    // function
    const toSearch = (e) => {
        if (e.target.value === ''){
            message.warning('输入值不能为空')
        } else {
            window.location = `${target}${e.target.value}`
        }
    }
    const changeAddShow = () => setAddShow(true)

    // dom
    const selectBefore = (
        <Select defaultValue={urlList[0].url} className="select-before" onChange={(e) => setTarget(e)}>
            {
                urlList.map(item => {
                    return <Option value={item.url} key={item.id}>{item.name}</Option>
                })
            }
        </Select>
    );

    // render
    return(
        <div >
            <div>
            <HeaderBar changeAddShow={changeAddShow} setData={setData} />

            <Row style={{margin:'2%'}}>
                <Col span={4} />
                <Col span={16}>
                    <Input addonBefore={selectBefore} onPressEnter={e => toSearch(e)} style={{width:'100%'}}  />
                </Col>
                <Col span={4} />
            </Row>
            <Cards setData={setData} />
            <GitHubs />
            </div>
        </div>
    )
}

export default  IndexPage
